import {useEffect, useState} from "react";

const useLocalStorage = (key) => {

  //1. 从localStorage中获取数据，并且创建数据的state
  // const [value, setValue] = useState(JSON.parse(localStorage.getItem(key)));

  //如果嫌useState初始化值的步骤太多，可读性差, 可以传入一个函数, 函数返回值为initialState
  const [value, setValue] = useState(() => {
    const data = localStorage.getItem(key);
    return typeof data == 'undefined' ? '' : JSON.parse(data);
  })

  //2.监听value改变，一旦数据发生改变，就存储value最新值
  useEffect(() => {
    //同步界面 value 到 localStorage
    //使用JSON序列化，保证Object类型成功存储, 否则会出现[Object, Object]
    localStorage.setItem(key, JSON.stringify(value));
  }, [value])

  //3.将 value 和 setValue 的操作返回给组件，让组件可以使用和修改值
  return [value, setValue];
}

export default useLocalStorage;